<template>
	<gui-page :customHeader="true" :fullPage="true" :isHeaderSized="false">
		<template v-slot:gBody>
			<view class="mainWrap">
				<view style="height: 100rpx"></view>
				<view class="gui-flex gui-row gui-justify-content-center">
					<image :src="imgArrActive.logo" mode="" style="width: 222rpx; height: 118rpx"></image>
				</view>
				<view style="margin-top: 170rpx">
					<form @submit="loginHandle" v-show="formState">
						<view class="gui-border-b gui-flex gui-align-items-center">
							<text class="gui-icons gui-block gui-color-gray gui-text" style="margin-right: 10rpx">&#xe629;</text>
							<input type="text" class="gui-form-input gui-flex1" name="account" placeholder="请输入手机号" />
						</view>
						<view class="gui-border-b gui-flex gui-align-items-center gui-margin-top">
							<text class="gui-icons gui-block gui-color-gray gui-text" style="margin-right: 10rpx">&#xe641;</text>
							<view class="gui-flex1">
								<input type="password" class="gui-form-input" v-if="dataRec.isPwd" v-model="dataRec.password" name="password" placeholder="请输入密码" />
								<input type="text" class="gui-form-input" v-if="!dataRec.isPwd" :value="dataRec.password" disabled name="password" placeholder="请输入密码" />
							</view>
							<text class="gui-form-icon gui-icons gui-text-center" :class="[!dataRec.isPwd ? 'gui-primary-color' : 'gui-color-gray']" @click="changePwdType">&#xe609;</text>
						</view>
						<view style="margin-top: 38rpx">
							<button type="default" class="gui-button gui-bg-primary gui-noborder" formType="submit">
								<text class="gui-color-white gui-button-text">登 录</text>
							</button>
							<!-- <view style="margin-top: 20rpx">
								<button type="default" :plain="true" class="gui-button gui-noborder" @tap="switchsign">
									<text class="gui-button-text gui-primary-color">忘记密码</text>
								</button>
							</view> -->
						</view>
					</form>
					<form @submit="registerHandle" v-show="!formState">
						<view class="gui-border-b gui-flex gui-align-items-center">
							<text class="gui-icons gui-block gui-color-gray gui-text" style="margin-right: 10rpx">&#xe629;</text>
							<input type="text" class="gui-form-input gui-flex1" name="mobile" placeholder="注册手机号" />
						</view>
						<view style="margin-top: 38rpx">
							<button type="default" class="gui-button gui-bg-primary gui-noborder" formType="submit">
								<text class="gui-color-white gui-button-text">修改密码</text>
							</button>
							<view style="margin-top: 20rpx">
								<button type="default" :plain="true" class="gui-button gui-noborder" @tap="switchsign">
									<text class="gui-button-text gui-primary-color">去登录</text>
								</button>
							</view>
						</view>
					</form>
				</view>
				<view class="gui-margin-top">
					<gui-radio @change="radioChange">
						<view class="gui-flex gui-row">
							<text class="gui-text gui-primary-text">我同意并遵守</text>
							<text class="gui-text gui-color-blue" @tap.stop.prevent="openXYPage(1)">《注册协议》</text>
							<text class="gui-text gui-primary-text">与</text>
							<text class="gui-text gui-color-blue" @tap.stop.prevent="openXYPage(2)">《隐私协议》</text>
						</view>
					</gui-radio>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script setup>
import { Local } from '@utils/storage';
import imgArr from '@assets/js/export.js';
import { loginApi } from '@api/api.js';
import { reactive, ref, onMounted } from 'vue';
let imgArrActive = reactive(imgArr);
let dataRec = reactive({
	riadoStatus: false,
	isPwd: true,
	password: ''
});
let formState = ref(true);
let changePwdType = () => {
	dataRec.isPwd = !dataRec.isPwd;
};
let switchsign = () => {
	formState.value = !formState.value;
};
let registerHandle = async (e) => {
	var formData = e.detail.value;
	if (formData.password != formData.repassword) {
		return uni.showToast({ title: '两次密码不一致', icon: 'none' });
	}
	try {
		let res = await registerApi(formData);
		if (res.code == 1) {
			uni.showToast({ title: '注册成功', icon: 'none' });
			Local.set('accountinfo', res.data);
			uni.switchTab({
				url: '/pages/switchPages/index'
			});
		}
	} catch (e) {
		console.log(e);
	}
};
let loginHandle = async (e) => {
	if (dataRec.riadoStatus) {
		var formData = e.detail.value;
		try {
			let res = await loginApi(formData);
			if (res.code == 1) {
				Local.set('accountinfo', res.data.userinfo);
				uni.redirectTo({
					url: '/pages/switchPages/index'
				});
			}
		} catch (e) {
			console.log(e);
		}
	} else {
		uni.showToast({
			title: '请同意协议',
			icon: 'none'
		});
	}
};

// 协议
let radioChange = (e) => {
	dataRec.riadoStatus = e[0];
};
let openXYPage = (e) => {
	let url = e == 1 ? '/pages/protocol/protocol?code=1' : '/pages/protocol/protocol?code=2';
	uni.navigateTo({
		url
	});
};

onMounted(async () => {
	// 先判断是否已经登录
	let accountinfo = Local.get('accountinfo');
	if (accountinfo) {
		// 已经登录过了
		uni.redirectTo({
			url: '/pages/switchPages/index'
		});
	}
});
</script>
<style lang="scss" scoped>
.mainWrap {
	padding: 50rpx 50rpx 0;
	// background-image: linear-gradient(-30deg, white 68%, #fee7dc);
}
</style>
